joenilson / fsRepublicaDominicana

 * Copyright (C) 2021 Joe Nilson <[email protected]>

 *

 * This program is free software: you can redistribute it and/or modify

 * it under the terms of the GNU Lesser General Public License as

 * published by the Free Software Foundation, either version 3 of the

 * License, or (at your option) any later version.

 *

 * This program is distributed in the hope that it will be useful,

 * but WITHOUT ANY WARRANTY; without even the implied warranty of

 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

 * GNU Lesser General Public License for more details.

 * You should have received a copy of the GNU Lesser General Public License

 * along with this program.  If not, see <http://www.gnu.org/licenses/>.

 */

/**

 * Modal Creation Functions

 * Code based on the gist https://gist.github.com/signalpoint/e6dda6b6220a157edbd170f3d2a6250e

 */

/**

 * @param {string} modalId

 * @param {string} title

 * @param {string} content

 * @param {string} contentType

 */

function executeModal(modalId, title, content, contentType = 'default', saveButtonCallback = '')

{

    //Set the modal ID

    let actualModal = getModal(modalId);

    // Init the modal if it hasn't been already.

    actualModal = (!actualModal) ? initModal(modalId) : actualModal;

    //Set the modal content based on the type

    content = setModalContentType(contentType, content);

    //Choose the buttons to show based on the contentType

    let buttons = setModalButtons(contentType, saveButtonCallback);

    //Assemble all the pieces in the final modal html body

    let html = setModalHtml(modalId, title, content, buttons);

    //Put the modal content in the modal

    setModalContent(modalId, html);

    //Show the modal

    $(actualModal).modal('show');

}

/**

 * @returns {HTMLElement}

 * @param {string} modalId

 */

/**

 * @param {string} contentType

 * @param {string} content

 * @returns {string}

 */

function setModalContentType(contentType, content)

{

    if (contentType == 'default') {

        return content;

        return '<div className="alert alert-' + contentType + '" role="alert"> ' + content + '</div>';

    }

}

/**

 * @param {string} modalId

 * @param {string} html

 */

function setModalContent(modalId, html)

{

    getModal(modalId).querySelector('.modal-content').innerHTML = html;

}

/**

 * @param {string} modalId

 * @param {string} title

 * @param {string} content

 * @param {string} buttons

 * @returns {string}

 */

function setModalHtml(modalId, title, content, buttons)

{

    var html =

        '<div class="modal-header">' +

        '<h5 class="modal-title" id="'+modalId+'-ModalLabel">'+title+'</h5>' +

        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +

        '<span aria-hidden="true">&times;</span>' +

        '</button>' +

        '</div>' +

        '<div class="modal-body">' +

        content +

        '</div>' +

        '<div class="modal-footer">' +

        buttons +

        '</div>';

    return html;

}

/**

 * @param {string} contentType

 * @param {string} saveButtonCallback

 * @returns {string}  {string}

 */

function setModalButtons(contentType, saveButtonCallback)

{

    const onClick = (saveButtonCallback) ? ' onClick=' + saveButtonCallback + '(this)' : '';

    const cancelButton  = '<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>';

    const warningButton  = '<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>';

    const saveButton = '<button type="button" class="btn btn-primary"'+onClick+'>Guardar</button>';

    let buttons = (contentType == 'warning') ? warningButton : cancelButton + saveButton;

    return buttons;

}

/**

 * @param {string} modalId

 * @returns {HTMLDivElement}

 */

function initModal(modalId)

{

    let modal = document.createElement('div');

    modal.classList.add('modal', 'fade');

    modal.setAttribute('id', modalId);

    modal.setAttribute('tabindex', '-1');

    modal.setAttribute('role', 'dialog');

    modal.setAttribute('aria-labelledby', modalId+'-ModalLabel');

    modal.setAttribute('aria-hidden', 'true');

    modal.innerHTML =

        '<div class="modal-dialog" role="document">' +

        '<div class="modal-content"></div>' +

        '</div>';

    document.body.appendChild(modal);

    return modal;